<!-- 零件-显示设置 -->
<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.partManager.productStructurePage.DisplaySettings.displaySetting')"
    @register="register"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :minHeight="400"
    :width="600"
  >
    <Tabs v-model:activeKey="activeKey">
      <TabPane
        key="1"
        :tab="t('routes.demo.partManager.productStructurePage.DisplaySettings.partNodeSetting')"
      >
        <Transfer
          :titles="[
            t('routes.demo.partManager.productStructurePage.DisplaySettings.alternativeAttribute'),
            t('routes.demo.partManager.productStructurePage.DisplaySettings.selectedAttribute'),
          ]"
          :listStyle="{ width: '250px', height: '300px' }"
          :dataSource="unBingList"
          :targetKeys="bingList"
          :render="(item) => item.title"
          @change="handleChange"
        />
      </TabPane>
      <TabPane
        key="2"
        :tab="
          t(
            'routes.demo.partManager.productStructurePage.DisplaySettings.subPartDisplayOrderSetting',
          )
        "
      >
        <Transfer
          :titles="[
            t(
              'routes.demo.partManager.productStructurePage.DisplaySettings.partAttributeAndRelationAttribute',
            ),
            t('routes.demo.partManager.productStructurePage.DisplaySettings.sortAttribute'),
          ]"
          :listStyle="{ width: '250px', height: '300px' }"
          :dataSource="partOrRelationList"
          :targetKeys="orderList"
          :render="(item) => item.title"
          @change="handleChange2"
        />
      </TabPane>
    </Tabs>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Transfer, Tabs, TabPane } from 'ant-design-vue';

  const { t } = useI18n();
  const activeKey = ref('1');
  const unBingList = ref<any>([]);
  const bingList = ref<any>([]);
  const partOrRelationList = ref<any>([]);
  const orderList = ref<any>([]);

  const handleChange = (nextTargetKeys: string[]) => {
    bingList.value = nextTargetKeys;
  };

  const handleChange2 = (nextTargetKeys: string[]) => {
    orderList.value = nextTargetKeys;
  };

  // 提交
  const handleSubmit = async () => {
    closeModal();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
  });
</script>

<style scoped lang="less"></style>
